@import './variables.scss';
@import './_handle.scss';
@import './themes.scss';

* {
	list-style: none;
	font-style: normal;
}

ol,
ul,
li {
	margin: 0;
	padding: 0;
}

textarea {
	resize: none !important;
}

// 全局面板
.card {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 32px;
	margin-bottom: 16px;
}

// flex 布局
.spaceBetween {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flexWrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.flexContent {
	display: flex;
	justify-content: center;
	align-items: center;
}

.alignCenter {
	display: flex;
	align-items: center;
}

.justifyEnd {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

// 公用样式
.el-form-item {
	margin-bottom: 18px !important;
}


.fication {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.45);
	line-height: 20px;
	margin-top: 8px;
}

// .searchGroup {
// 	.el-input__inner {
// 		height: 40px !important;
// 		line-height: 40px !important;
// 		font-size: 14px;
// 	}
// }
.el-dialog{
	.dataFrom.demo-ruleForm{
		// margin-top: 20px; 
		max-height: 550px; 
		padding-right: 10px;
		overflow-y: auto; 
		overflow-x: hidden;
		// 滚动条样式
		&::-webkit-scrollbar {
			width: 6px;
			height: 0;
		}
		&::-webkit-scrollbar-thumb {
		background: #e4e7ed;
		}
		&::-webkit-scrollbar-track {
		background: #f2f6fc;
		}
	}
	.popup-detail.dataFrom.demo-ruleForm{
		padding-right: 8px;
	}
	.popup-detail{
		
		.el-form-item{
			display: flex;
			margin-bottom: 0 !important;
			.el-form-item__content{
				flex: 1;
			}
			.el-form-item__content,.el-form-item__label{
				line-height: 28px !important;
			}
		}
	}
}
.el-form-item__label {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.85) !important;
	padding: 0 14px 0 0 !important;
	font-weight: 400;
	line-height: 22px;
	white-space: nowrap !important;
}

// 文本框公用样式
.el-input__inner {
	min-height: 40px !important;
	line-height: 40px !important;
	border-radius: 2px !important;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.85) !important;
	&::placeholder{
		color: rgba(0, 0, 0, 0.25) !important;
	}
}
.el-textarea__inner{
	&::placeholder{
		font-size: 14px;
		color: rgba(0, 0, 0, 0.25) !important;
		font-weight: normal !important;
	}
}
.el-form-item--medium .el-form-item__label{
	min-height: 40px !important;
	line-height: 40px !important;
}
.el-form-item--medium .el-form-item__content{
	line-height: 40px !important;
}

.lineheight0.el-form-item--medium {
	.el-form-item__content{
		line-height: 0 !important;
	}
	.el-form-item__label{
		line-height: 0 !important;
		padding-top: 8px !important;
	}
}
.el-date-editor{
	.el-range-input{
		&::placeholder{
			font-size: 14px;
			color: rgba(0, 0, 0, 0.25) !important;
		}
	}
}
// .el-table,
// .el-form {
// 	.el-input--medium .el-input__inner {
// 		height: 40px;
// 		line-height: 40px !important;
// 	}
// }

//公用表单
.dataFrom{
	max-width: 599px;
	margin: 0 auto;

	.el-form-item__label {
		font-size: 14px;
		color: #333;
		padding: 0 14px 0 0 !important;
		font-weight: 400;
		white-space: nowrap !important;
	}

	.el-input__inner {
		height: 40px;
		line-height: 40px;
		font-size: 14px;
	}

	.el-textarea__inner {
		height: 120px;
		padding: 8px 12px;
		border-radius: 2px;
	}
	.formBtn {
		margin-top: 50px;
		text-align: center;

		.el-form-item__content {
			margin-left: 0px !important;
		}
	}

	// 下拉框
	.el-select {
		width: 100%;
	}

	// 时间框
	.el-date-editor {
		width: 100%;
	}

	.el-radio {
		line-height: 35px;
		margin-top: 0;
	}

	// 级联框
	.el-cascader {
		width: 100%;
	}

	// 日期框
	.el-date-editor {
		width: 100%;
	}

}
.demo-ruleForm{
	.el-textarea__inner {
		height: 120px;
		padding: 8px 12px;
		border-radius: 2px;
	}
}
.formRadio:first-child {
	margin-top: 0;
}

.formRadio {
	display: flex;
	align-items: center;
	margin-top: 12px;
}

// 单选框
.el-radio__label, .el-checkbox__label {
	color: rgba(0, 0, 0, 0.65);
}


// 文本域字数限制样式
.el-input__count {
	right: 20px !important;
}


// 公共表格样式
.b-query-table, .query-table {
	width: 100% !important;
}

// .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
// 	border-bottom: 1px solid #f0f0f0 !important;
// }
.query-pagination {
	width: 100%;
	margin-top: 13px;
}
.table-header-title {
	height: 48px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.45);
	font-weight: 500;
	background-color: $tableHeader !important;
}
.table-row-class{
	height: 46px;
}
.has-gutter tr th {
	background-color: $tableHeader !important;
}

// 表格里面的数形结构
.tableTree {
	display: inline-block;

	span {
		margin-left: 10px;
	}
}

/// 按钮主题色
.theme-font-color {
	@include font_color("colorDefault");
	font-size: 14px;
}

// 搜索公用样式
.searchGroup {
	padding: 25px 32px 10px !important;
}

.required {
	color: red;
}

/**
 * element 样式修改
**/
// 公共弹出框样式
.el-dialog {
	border-radius: 8px !important;
	.el-dialog__body {
		max-height: calc(100vh - 220px);
		overflow: auto;
		padding: 0px 32px;
		
		.dataFrom{
			max-width: none !important;
		}
		// 滚动条样式
		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background: #e4e7ed;
		}
		&::-webkit-scrollbar-track {
			background: #f2f6fc;
		}
	}

	.el-dialog__header {
		padding: 15px 24px !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
	
	.el-textarea__inner {
		height: 120px !important;
		padding: 8px 12px;
		border-radius: 2px;
	}
	// .el-table {
	// 	margin-top: 24px !important;
	// }
}

.el-divider {
	margin: 24px 0 !important;
}

// switch
.el-switch.is-checked .el-switch__core {
	@include border_color('colorTheme');
	@include background_color('colorTheme', 1);
}

// el-button
.el-button--text {
	@include font_color('colorTheme');
}

// el-pagation
.el-pagination.is-background .el-pager li {
	background: transparent !important;
	border: 1px solid #EBEEF5;
	border-radius: 2px;
	min-width: 32px !important;
	height: 32px;
	line-height: 32px;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
	width: 32px !important;
	height: 32px !important;
	line-height: 32px;
	border: 1px solid #EBEEF5;
	border-radius: 2px;
	background: transparent !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active,
.el-date-table td.current:not(.disabled) span {
	@include background_color('colorTheme', 1);
	@include font_color('colorFFF');
	@include border_color('colorTheme');
}
.el-date-table td.start-date span,
.el-date-table td.end-date span,
.el-slider__bar,
.el-progress-bar__inner{
	@include background_color('colorTheme', 1);
}
.el-table .ascending .sort-caret.ascending{
	@include tri_bottom_color('colorTheme')
}
.el-table .descending .sort-caret.descending{
	@include tri_top_color('colorTheme')

}
.el-select-dropdown__item.selected,
.el-cascader-node.in-active-path, 
.el-cascader-node.is-selectable.in-checked-path, 
.el-cascader-node.is-active,
.el-month-table td.today .cell,
.el-month-table td .cell:hover,
.el-date-picker__header-label:hover,
.el-picker-panel__icon-btn:hover,
.el-year-table td.today .cell,
.el-year-table td .cell:hover{
	@include font_color('colorTheme');
}

// el-radio
.el-radio__input.is-checked+.el-radio__label,
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus,
.el-date-table td.available:hover,
.el-date-table td.today span,
.el-checkbox__input.is-checked+.el-checkbox__label,
.el-radio-button__inner:hover,
.el-time-panel__btn.confirm {
	@include font_color('colorTheme');
}

.el-date-table td.today.start-date span {
	color: #fff !important;
}

.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
	@include background_color('colorTheme', 1);
	@include border_color('colorTheme');
}

// el-input
.el-radio__inner:hover,
.el-input__inner:focus,
.el-range-editor.is-active,
.el-textarea__inner:focus,
.el-pagination__sizes .el-input .el-input__inner:hover,
.el-checkbox__inner:hover,
.pic-uploader-component .el-upload:hover,
.el-picker-panel__footer .el-button--default:hover,
.el-slider__button,
.el-upload:focus,
.el-cascader .el-input.is-focus .el-input__inner,
.el-select .el-input.is-focus .el-input__inner {
	@include border_color('colorTheme');
}

// el-breadcrumb
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover,
.el-menu-item.is-active,
.el-picker-panel__footer .el-button--default:hover,
.el-input-number__increase:hover,
.el-input-number__decrease:hover,
.w-e-toolbar .w-e-active i,
.el-dialog__headerbtn:hover .el-dialog__close {
	@include font_color('colorTheme');
}

.el-date-table td.today.start-date.in-range span:hover,
.el-date-table td.today.start-date.in-range span .el-date-table td.today.end-date.in-range span:hover,
.el-date-table td.today.end-date.in-range span,
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
	color: #ffffff !important;
}

.el-pager li.active,
.el-pager li:hover,
.time-select-item.selected:not(.disabled) {
	@include font_color('colorTheme');
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
	@include font_color('colorTheme');
	@include border_color('colorTheme');
}

.el-tag {
	@include border_color_opacity('colorTheme', .2);
	@include font_color('colorTheme');
	@include background_color('colorTheme', 0);
	margin: 0 8px 5px 0;
	height: 30px !important;
	line-height: 30px !important;
	font-size: 14px !important;
	.el-tag__close {
		@include font_color('colorTheme');

		&:hover {
			@include background_color('colorTheme', 1);
			color: $white !important;
		}
	}
}

.el-loading-spinner {
	top: 400px !important;
}

.el-loading-spinner circle {
	@include stroke_color('colorTheme');
}
.el-select-dropdown__item.hover,
.el-cascader-node:not(.is-disabled):hover, 
.el-cascader-node:not(.is-disabled):focus{
	@include background_color('colorTheme', .08);
	@include font_color('colorTheme');
}

// 列表操作按钮
.operation-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;

	a {
		@include font_color('colorTheme');

		&:hover {
			@include font_color('colorTheme');
		}

		&:focus {
			@include font_color('colorTheme');
		}
	}
}

// 主题背景色
.backgroundTheme {
	@include background_color('colorTheme', 1);
}

// 主题字体色
.fontTheme {
	@include font_color('colorTheme');
}

// 边框颜色
.borderTheme {
	@include border_color('colorTheme');
}

// 边框颜色
.borderBottomTheme {
	@include tri_bottom_color('colorTheme');
}

.backgroundTheme8 {
	@include background_color('colorTheme', .08);
}

.el-table th.el-table__cell.is-leaf {
	background-color: #f5F7FA !important;
}

.el-table td.el-table__cell {
	// border-bottom: 1px solid #f5F7FA !important;
	border-bottom: 1px solid #EBEEF5 !important;
	color: rgba(0, 0, 0, 0.85) !important;
}

.el-select .el-tag__close.el-icon-close{
	@include background_color('colorTheme', 0.3);
}
.el-dropdown-menu__item:not(.is-disabled):hover {
	@include background_color('colorTheme', 0.1);
}

.el-table {
	.cell:empty::before {
		content: '-' !important;
	}
}

//   TREE
.tableTreeBox .tableHead {
	background: #f5F7FA !important;
	color: rgba(0, 0, 0, 0.45) !important;
	font-weight: 500 !important;
}

.tableTreeBox .el-tree .el-tree-node__content {
	border-color: #EBEEF5 !important;
	color: rgba(0, 0, 0, 0.85) !important;
}

//   messageBox
.el-message-box__wrapper {
	.el-message-box {
		width: 480px;
		padding-bottom: 0 !important;

		.el-message-box__header {
			height: 56px !important;
			padding: 0 !important;

			.el-message-box__title {
				display: block !important;
				line-height: 56px !important;
				padding: 0 24px !important;
				border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
				font-size: 18px !important;
				color: rgba(0, 0, 0, 0.85) !important;
			}
		}

		.el-message-box__content {
			padding: 32px!important;
			color: rgba(0, 0, 0, 0.65) !important;

			.el-message-box__message {
				padding: 0 !important;
				text-align: justify !important;
			}
			.el-message-box__status{
				display: none !important;
			}
		}

		.el-message-box__btns {
			display: flex !important;
			align-items: flex-start !important;
			justify-content: flex-end !important;
			padding: 0 !important;
			padding-right: 24px !important;
			padding-bottom: 16px !important;

			.theme-btn-hollow {
				width: 76px !important;
				height: 32px !important;
				line-height: 30px !important;
				padding: 0 !important;
				// border-color: rgba(217, 217, 217, 1) !important;
				// color: rgba(0, 0, 0, 0.85) !important;
			}

			.theme-btn-solid {
				width: 76px !important;
				margin-left: 16px !important;
				height: 32px !important;
				line-height: 30px !important;
				padding: 0 !important;
				&:hover,
				&:focus {
					border: 1px solid transparent !important;
				}
			}
		}
		.el-message-box__headerbtn{
			top: 18px !important;
		}
	}
}

.el-dialog__wrapper {
	.el-dialog {
		.el-dialog__body {
			padding: 32px !important;
		}

		.el-dialog__footer {
			display: flex !important;
			align-items: flex-start !important;
			justify-content: flex-end !important;
			padding: 0 !important;
			padding-right: 24px !important;
			padding-bottom: 16px !important;
		}
	}
}

.el-tag--medium {
	line-height: 28px !important;
}

.el-input-group__append {
	background-color: #fafafa !important;
	color: rgba(0, 0, 0, 0.65) !important;
	padding: 0 12px !important;
	border-top-right-radius: 2px !important;
	border-bottom-right-radius: 2px !important;
}
.el-input__count-inner,
.el-input__count{
	color: rgba(0, 0, 0, 0.25) !important;
}
// 分类列表的公共样式
.class-list{
	.custom-tree-node{
		display: flex;
		align-items: center;
		padding-right: 0 !important;
		>span:first-of-type{
			font-size: 14px;
			color: rgba(0, 0, 0, 0.85);
		}
	}
	.tableHead {
		width: 100%;
		height: 54px;
		line-height: 54px;
		font-size: 14px;
		color: #333;
		display: flex;
		padding-left: 16px;
		justify-content: space-between;
		border-bottom: 1px solid #EBEEF5;
		.class-title{
			flex: 1;
			display: inline-flex;
			justify-content: flex-end;
			>div{
				text-align: center;
			}
			>div:nth-of-type(1){
				width: 140px;
			}
			>div:nth-of-type(2){
				width: 176px;
			}
			>div:nth-of-type(3){
				width: 230px;
			}
		}

		label {
			font-weight: 400;
		}
	}
	.elOperation {
		flex: 1;
		font-size: 14px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		>em{
			text-align: center;
		}
		>em:nth-of-type(1){
			width: 140px;
		}
		>em:nth-of-type(2){
			width: 176px;
		}
		.operationBtn{
			width: 230px !important;
			text-align: center;
			line-height: 25px;
		}
	}
}

// 隐藏 input type=number 显示右边上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: textfield;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}

input[type="number"] {
	-moz-appearance: textfield;
}

.el-icon-caret-right{
	font-size: 16px;
	color: #909399;
}
// input 最大数量样式修改
.el-input {
	// .el-input__inner {
	// 	padding-right: 45px;
	// }

	.el-input__inner:read-only {
		padding-right: 15px;
	}
}

.el-table {
	.el-input__inner {
		padding-right: 15px !important;
	}

	.is-controls-right {
		.el-input__inner {
			padding-right: 50px !important;
		}
	}
}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
	@include font_color('colorTheme');
	background-color: #fff !important;
}


.el-tooltip__popper {
	max-width: 50%;
}
.d-flex-center{
	display: flex; 
	align-items:center; 
	justify-content:center;
}
.no-wrap{
	word-break: break-all; 
	white-space: nowrap;
}
// tree 
.el-tree{
	// 滚动条样式
	&::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}
	&::-webkit-scrollbar-thumb {
		background: #e4e7ed;
	}
	&::-webkit-scrollbar-track {
		background: #f2f6fc;
	}
}
// 弹窗表格取消固定高度
.el-dialog{
	margin-top: 7vh !important;
	.el-dialog__body{
		.el-table.b-query-table, .el-table.query-table{
			overflow: auto !important;
			// max-height: calc(100vh - 460px) !important;
			.el-table__body-wrapper{
				// height: calc(100vh / 2) !important;
				max-height: calc(100vh - 350px) !important;
				overflow-y: auto !important;
				// overflow-x: hidden !important;
				// 滚动条样式
				&::-webkit-scrollbar {
					width: 4px;
					height: 10px;
				}
				&::-webkit-scrollbar-thumb {
					background: #e4e7ed;
				}
				&::-webkit-scrollbar-track {
					background: #f2f6fc;
				}
			}
		}
	}
}

// 省略号
.one-hidden{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.two-hidden{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.three-hidden{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.el-dropdown-menu--medium .el-dropdown-menu__item{
	line-height: 36px !important;
}

.el-table__body tr.hover-row > td.el-table__cell,
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
	background-color: #F9FFFE !important;
}

.el-table .cell{
	width: 100%;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	> div {
		flex: 1;
	}
}
.el-table th.el-table__cell > .cell{
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 32px;
	min-height: 32px;
}

// .el-dialog__wrapper .el-dialog .el-dialog__body{
// 	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
// }
// 商家入驻时  调整多图上传高度
.up-down-label.lineheight0.el-form-item--medium{
	.el-form-item__label{
		line-height: 40px !important;
		padding-top: 0 !important;
	}
}

// 通用样式
.w360{
	width: 360px !important;
}
.padding0{
	padding: 0 !important;
}
.padding24{
	padding: 24px !important;
}
.pr24{
	padding-right: 24px !important;
}
.mb0{
	margin-bottom: 0 !important;
}
.mt0{
	margin-top: 0 !important;
}
.ml0{
	margin-left: 0 !important;
}
.mr0{
	margin-right: 0 !important;
}
.mb8{
	margin-bottom: 8px !important;
}
.mt8{
	margin-top: 8px !important;
}
.ml8{
	margin-left: 8px !important;
}
.mr8{
	margin-right: 8px !important;
}
.mb16{
	margin-bottom: 16px !important;
}
.mt16{
	margin-top: 16px !important;
}
.ml16{
	margin-left: 16px !important;
}
.mr16{
	margin-right: 16px !important;
}
.mb24{
	margin-bottom: 24px !important;
}
.mt24{
	margin-top: 24px !important;
}
.ml24{
	margin-left: 24px !important;
}
.mr24{
	margin-right: 24px !important;
}

.font18{
	font-size: 18px !important;
}

.flex-center{
	display: flex;
	align-items: center;
	justify-content: center;
}
.no-table-bottom-border{
	.el-table{
		&::before{
			height: 0 !important;
		}
	}
}
.el-table--medium .el-table__cell{
  padding: 8px 0 !important;
}
.text-align-l{
	text-align: left !important;
}
.no-data{
	font-size: 14px;
	color: rgba(0, 0, 0, 0.25);
}
// 详情或者弹窗增加表格高度
.send-order{
	.el-table{
	  .el-table__cell{
		padding: 12px 0 !important;
	  }

	}
}
// 按钮间距
.el-button+.el-button{
	margin-left: 16px !important;
}
.el-pagination.order-pagination .el-select .el-input .el-input__inner{
min-height: 32px !important;
}
.detailsForm{
.el-form-item__label{
	height:22px !important;
	color: rgba(0,0,0,0.45) !important;
	line-height:22px !important;
	min-height: 22px !important;
}
.el-form-item__content{
	line-height:22px !important;
}
}
  .detailsMap{
	.el-form-item__label{
		line-height:40px !important;
	}
}
// 业务模块公用样式
.businessModule{
	.h4{
        font-weight: 700;
        color: rgba(0,0,0,0.85);
        font-size:16px;
        margin-bottom:24px;
    }
	.el-form-item__label{
		white-space: normal !important;
		
	}
	.lineheight0.el-form-item--medium .el-form-item__label{
		line-height: 22px !important;
	}
	.b-card{
		margin-bottom: 24px !important;
	}
}
// 公用表格图片
.tabCarImg{
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.logo{
		position: relative;
		width: 120px;
		height: 96px;
		border-radius: 4px;
		.el-image{
			width: 100%;
			height: 100%;
		}
		span{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: rgba(0, 0, 0, 0.65);
			height: 22px;
			text-align: center;
			color: #fff;
			font-size: 14px;
		}
	}
	.tabCarInfo{
		flex: 1;
		margin-left: 8px;
		.name{
			color: rgba(0,0,0,0.85);
		}
		.label{
			span{
				color: rgba(0,0,0,0.65);
				position: relative;
				padding-left: 8px;
				margin-left: 8px;
				&:first-child{
					margin-left: 0;
					padding-left: 0;
					&::after{
						background: none;
					}
				}
				&::after{
					content: '';
					position: absolute;
					width: 1px;
					height: 12px;
					background: #DCDFE6;
					left: 0;
					top: 2px;
				}
			}
		}
	}
}

// 默认滚动条样式
.default-scroll{
	// 滚动条样式
	&::-webkit-scrollbar {
	  width: 6px;
	  height: 6px;
	}
	&::-webkit-scrollbar-thumb {
	  background: #e4e7ed;
	}
	&::-webkit-scrollbar-track {
	  background: #f2f6fc;
	}
}